<div class="submissions-table container">
	<div class="row text-center analytics">
		<div class="col-xs-12 header-title">
			<div class="col-xs-3">
				{{ 'TOTAL_VIEWS' | translate }}
			</div>

			<div class="col-xs-3">
				{{ 'RESPONSES' | translate }}
			</div>

			<div class="col-xs-3">
				{{ 'COMPLETION_RATE' | translate }}
			</div>

			<div class="col-xs-3">
				{{ 'AVERAGE_TIME_TO_COMPLETE' | translate }}
			</div>
		</div>
		<div class="col-xs-12 header-numbers">
			<div class="col-xs-3">
				{{myform.analytics.visitors.length}}
			</div>

			<div class="col-xs-3">
				{{myform.analytics.submissions}}
			</div>

			<div class="col-xs-3">
				{{myform.analytics.conversionRate | number:0}}%
			</div>

			<div class="col-xs-3">
				{{ AverageTimeElapsed | secondsToDateTime | date:'mm:ss'}}
			</div>
		</div>
		<div class="col-xs-12 detailed-title">
			<div class="col-xs-3">
				{{ 'DESKTOP_AND_LAPTOP' | translate }}
			</div>

			<div class="col-xs-3">
				{{ 'TABLETS' | translate }}
			</div>

			<div class="col-xs-3">
				{{ 'PHONES' | translate }}
			</div>

			<div class="col-xs-3">
				{{ 'OTHER' | translate }}
			</div>
		</div>

		<div class="col-xs-12 detailed-row">
			<div class="col-xs-3">
				<div class="row header">
					{{ 'UNIQUE_VISITS' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.desktop.visits}}
				</div>
			</div>

			<div class="col-xs-3">
				<div class="row header">
					{{ 'UNIQUE_VISITS' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.tablet.visits}}
				</div>
			</div>

			<div class="col-xs-3">
				<div class="row header">
					{{ 'UNIQUE_VISITS' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.tablet.visits}}
				</div>
			</div>

			<div class="col-xs-3">
				<div class="row header">
					{{ 'UNIQUE_VISITS' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.other.visits}}
				</div>
			</div>
		</div>

		<div class="col-xs-12 detailed-row">
			<div class="col-xs-3">
				<div class="row header">
					{{ 'RESPONSES' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.desktop.responses}}
				</div>
			</div>

			<div class="col-xs-3">
				<div class="row header">
					{{ 'RESPONSES' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.tablet.responses}}
				</div>
			</div>

			<div class="col-xs-3">
				<div class="row header">
					{{ 'RESPONSES' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.phone.responses}}
				</div>
			</div>

			<div class="col-xs-3">
				<div class="row header">
					{{ 'RESPONSES' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.other.responses}}
				</div>
			</div>
		</div>

		<div class="col-xs-12 detailed-row">
			<div class="col-xs-3">
				<div class="row header">
					{{ 'COMPLETION_RATE' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.desktop.completion}}%
				</div>
			</div>

			<div class="col-xs-3">
				<div class="row header">
					{{ 'COMPLETION_RATE' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.tablet.completion}}%
				</div>
			</div>

			<div class="col-xs-3">
				<div class="row header">
					{{ 'COMPLETION_RATE' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.phone.completion}}%
				</div>
			</div>

			<div class="col-xs-3">
				<div class="row header">
					{{ 'COMPLETION_RATE' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.other.completion}}%
				</div>
			</div>
		</div>

		<div class="col-xs-12 detailed-row">
			<div class="col-xs-3">
				<div class="row header">
					{{ 'AVERAGE_TIME_TO_COMPLETE' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.desktop.average_time | secondsToDateTime | date:'mm:ss'}}
				</div>
			</div>

			<div class="col-xs-3">
				<div class="row header">
					{{ 'AVERAGE_TIME_TO_COMPLETE' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.tablet.average_time | secondsToDateTime | date:'mm:ss'}}
				</div>
			</div>

			<div class="col-xs-3">
				<div class="row header">
					{{ 'AVERAGE_TIME_TO_COMPLETE' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.phone.average_time | secondsToDateTime | date:'mm:ss'}}
				</div>
			</div>

			<div class="col-xs-3">
				<div class="row header">
					{{ 'AVERAGE_TIME_TO_COMPLETE' | translate }}
				</div>
				<div class="row">
					{{DeviceStatistics.other.average_time | secondsToDateTime | date:'mm:ss'}}
				</div>
			</div>
		</div>

		<div class="col-xs-12 field-title-row">

			<div class="col-xs-3">
				<strong>{{ 'FIELD_TITLE' | translate }}</strong>
			</div>
			<div class="col-xs-3">
				<strong>{{ 'FIELD_VIEWS' | translate }}</strong>
			</div>
			<div class="col-xs-3">
				<strong>{{ 'FIELD_RESPONSES' | translate }}</strong>
			</div>

			<div class="col-xs-3">
				<strong>{{ 'FIELD_DROPOFF' | translate }}</strong>
			</div>
		</div>

		<div class="col-xs-12 field-detailed-row" ng-repeat="fieldStats in myform.analytics.fields">

			<div class="col-xs-3">
				{{fieldStats.field.title}}
			</div>
			<div class="col-xs-3">
				{{fieldStats.totalViews}}
			</div>
			<div class="col-xs-3">
				{{fieldStats.responses}}
			</div>
			<div class="col-xs-3">
				{{fieldStats.continueRate}}%
			</div>
		</div>
	</div>
	<br>
	<div class="row table-tools">
		<div class="col-xs-2">	
			<button class="btn btn-danger" ng-click="deleteSelectedSubmissions()" ng-disabled="!isAtLeastOneChecked();">
				<i class="fa fa-trash-o"></i> {{ 'DELETE_SELECTED' | translate }}
			</button>
		</div>
		<div class="col-xs-2 col-xs-offset-4 text-right">	
			<button class="btn btn-gray" ng-click="exportSubmissions('xml')">
				<small>{{ 'EXPORT_TO_EXCEL' | translate }}</small>
			</button>
		</div>
		<div class="col-md-2 text-right">	
			<button class="btn btn-gray" ng-click="exportSubmissions('csv')">
				<small>{{ 'EXPORT_TO_CSV' | translate }}</small>
			</button>
		</div>
		<div class="col-md-2 text-right">	
			<button class="btn btn-gray" ng-click="exportSubmissions('json')">
				<small>{{ 'EXPORT_TO_JSON' | translate }}</small>
			</button>
		</div>
	</div>
	<div class="row table-outer">
		<div class="col-xs-12">
			<table id="table-submission-data" class="table table-striped table-hover table-condensed">
			<thead>
				<tr>
					<th>
						<input ng-model="table.masterChecker" ng-change="toggleAllCheckers()" type="checkbox"/>
					</th>
					<th>#</th>
					<th data-ng-repeat="(key, value) in myform.form_fields track by $index">
						{{value.title}}
					</th>
					<th>
						{{ 'PERCENTAGE_COMPLETE' | translate }}
					</th>
					<th>
						{{ 'TIME_ELAPSED' | translate }}
					</th>
					<th>
						{{ 'DEVICE' | translate }}
					</th>
					<th>
						{{ 'LOCATION' | translate }}
					</th>
					<th>
						{{ 'IP_ADDRESS' | translate }}
					</th>
					<th>
						{{ 'DATE_SUBMITTED' | translate }} (UTC)
					</th>
				</tr>
			</thead>

			<tbody>
				<tr data-ng-repeat="row in table.rows" ng-click="rowClicked($index)" ng-class="{selected: row.selected === true}">
					<td>
						<input ng-model="row.selected" type="checkbox"/>
					</td>
					<th class="scope">
						{{$index+1}}
					</th>

					<td data-ng-repeat="field in row.form_fields">
						{{field.fieldValue}}
					</td>
					<td>
						{{row.percentageComplete}}%
					</td>
					<td>
						{{row.timeElapsed | secondsToDateTime | date:'mm:ss'}}
					</td>
					<td>
						{{row.device.name}}, {{row.device.type}}
					</td>
					<td>
						{{row.geoLocation.City}}, {{row.geoLocation.Country}}
					</td>
					<td>
						{{row.ipAddr}}
					</td>
					<td>
						{{row.created | date:'yyyy-MM-dd HH:mm:ss'}}
					</td>
				</tr>
			</tbody>
			</table>
		</div>
	</div>
</div>
